AJAX Extensions 1.0: So verwendet man das Update-Panel-Steuerelement

Mit AJAX Extensions lassen sich AJAX-Funktionen komfortabel und einfach einbinden. Die partielle Seitenaktualisierung ist dabei ein wichtiger Schwerpunkt, auf den der Artikel näher eingeht.

von Tony Patton am 11. Dezember 2007 , 11:28 Uhr

ZDNet hat das ASP.NET-Add-On AJAX Extensions 1.0 bereits vor Kurzem vorgestellt. Im zweiten Teil geht es jetzt darum, wie man mit dem Update-Panel-Steuerelement arbeiten kann.

Der Schwung der AJAX-Revolution hält an. Immer mehr Entwickler verwenden diese Technologie, um benutzerfreundlichere Anwendungen zu erstellen. So bietet etwa das Steuerelement Update-Panel sehr viele Möglichkeiten zur einfachen Implementierung von AJAX-Funktionen – besonders von partiellen Seitenaktualisierungen.

So werden mehrere Update-Panel-Steuerelemente verwendet

Werden die Steuerelemente Update-Panel und Script-Manager zusammen eingesetzt, kann man eine Implementierung vornehmen, bei der die Seiten nur partiell geladen werden. Das ist übrigens eine häufige Anwendung der AJAX-Technologie. Während pro Seite nur ein Script-Manager-Steuerelement verwendet werden darf, lassen sich hingegen mehrere Update-Panel-Steuerelemente einsetzen. Damit lassen sich verschiedene Bereiche der Seite definieren, die unabhängig von anderen Update-Panels und auch unabhängig von der gesamten Seite aktualisiert werden können.

Das folgende Beispiel verwendet drei Update-Panel-Steuerelemente auf einer ASP.NET-Seite. Jedes Update-Panel umfasst Label- und Button-Steuerelemente. Das aktuelle Datum wird im Label-Steuerelement angezeigt, wenn die Taste ausgewählt wird. Die Anzeige von Datum und Uhrzeit erfolgt über Programmzeilen, die sich im Klick-Ereignis der jeweiligen Taste finden.

Das Listing umfasst die Steuerelemente und den Code. Wenn der Code ausgeführt wird, zeigt sich, dass jedes Label-Steuerelement unabhängig von den anderen Steuerelementen auf der Seite mit dem aktuellen Datum und der aktuellen Uhrzeit versehen wird.

<%@ Page Language=“C#“ %> 
<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.1//EN“ „http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd“> 
<script runat=“server“> 
protected void Button1_Click(object sender, EventArgs e) { 
Label1.Text = DateTime.Now.ToString(); 
} 
protected void Button1_Click1(object sender, EventArgs e) { 
Label2.Text = DateTime.Now.ToString(); 
} 
protected void Button2_Click(object sender, EventArgs e) { 
Label3.Text = DateTime.Now.ToString(); 
} 
</script> 
<html xmlns=“http://www.w3.org/1999/xhtml“> 
<head runat=“server“> 
<title>ASP.NET AJAX – Multiple UpdatePanel controls</title> 
</head> 
<body> 
<form id=“frmMultipleUpdates“ runat=“server“> 
<div> 
<asp:ScriptManager ID=“ScriptManager1″ runat=“server“ /><asp:UpdatePanel id=“UpdatePanel1″ runat=“server“> 
<contenttemplate> 
<asp:Label id=“Label1″ runat=“server“ Text=““ /> 
<asp:Button id=“btnUpdate“ runat=“server“ Text=“Click Here“ OnClick=“Button1_Click“ /> 
</contenttemplate> 
</asp:UpdatePanel> 
<asp:UpdatePanel ID=“UpdatePanel2″ runat=“server“> 
<ContentTemplate> 
<asp:Label ID=“Label2″ runat=“server“ Text=““ /> 
<asp:Button ID=“Button1″ runat=“server“ OnClick=“Button1_Click1″ Text=“Click Here“ /> 
</ContentTemplate> 
</asp:UpdatePanel> 
</div> 
<asp:UpdatePanel ID=“UpdatePanel3″ runat=“server“> 
<ContentTemplate> 
<asp:Label ID=“Label3″ runat=“server“ Text=““ /> 
<asp:Button ID=“Button2″ runat=“server“ Text=“Click Here“ OnClick=“Button2_Click“ /> 
</ContentTemplate> 
</asp:UpdatePanel> 
</form></body></html>

Ein weiteres Verfahren, mehrere Update-Panel-Steuerelemente in eine Seite einzubauen, ist das Nesting, also die Verschachtelung eines Update-Panels in einem anderen.

Inhalt

AJAX Extensions 1.0: So verwendet man das Update-Panel-Steuerelement

Neueste Kommentare

Noch keine Kommentare zu AJAX Extensions 1.0: So verwendet man das Update-Panel-Steuerelement

Vielen Dank für Ihren Kommentar.
Ihr Kommentar wurde gespeichert und wartet auf Moderation.

Schreibe einen Kommentar Antworten abbrechen

Neueste Kommentare

Noch keine Kommentare zu AJAX Extensions 1.0: So verwendet man das Update-Panel-Steuerelement

Vielen Dank für Ihren Kommentar.Ihr Kommentar wurde gespeichert und wartet auf Moderation.

Schreibe einen Kommentar Antworten abbrechen

Vielen Dank für Ihren Kommentar.
Ihr Kommentar wurde gespeichert und wartet auf Moderation.